<template>
  <div class="area">
    <!-- 导航栏 -->
    <van-nav-bar
      title="城市选择"
      left-arrow
      :border="false"
      :z-index="navIndex"
      fixed
      @click-left="close"
    />
    <div class="has-top">
      <div>
        <div class="current">
          <p class="flex-1">
            <svg-icon icon-class="location" />当前定位
          </p>
          <div class=" mt-20">

            <span class="city-box text-show-line-1 mr-20" @click="selCity(currentCity)">{{ currentCity.Name }}</span>
            <span v-show="localCity.Name" class="city-box text-show-line-1" @click="selCity(localCity)">
              {{ localCity.Name }}<svg-icon icon-class="location" />
            </span>

            <span class="color-primary fs-24 local" @click="getCurrentPosition">重新定位</span>
          </div>
        </div>
        <div class="bg-white">
          <p class="plr-30 fs-30">城市</p>
          <div class="plr-30 pb-20 mt-20">
            <span
              v-for="(item, index) in CityList"
              :key="index"
              class="city-box text-show-line-1 mr-20 mb-20"
              @click="selCity(item)"
            >{{ item.Name }}</span>
            <span class="city-box text-show-line-1 mr-20 mb-20">
              <a :href="JoinUrl">申请加盟</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetCitySettingInfo } from 'api/store'
export default {
  name: 'AreaSelect',
  props: {
    currentCity: {
      type: Object
    },
    localCity: {
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      navIndex: 999,
      CityList: [],
      JoinUrl: ''
    }
  },
  created() {
    // 城市列表初始化
    this.GetCitySettingInfo()
  },
  methods: {
    // 获取城市列表信息
    GetCitySettingInfo() {
      GetCitySettingInfo().then(res => {
        console.log(res)
        if (res && res.Data) {
          this.CityList = res.Data.CityList
          this.JoinUrl = res.Data.JoinUrl
        }
      })
    },
    // 重新定位当前位置
    getCurrentPosition() {
      this.$toast.loading({
        message: '正在定位，请稍等...',
        loadingType: 'spinner'
      })
      this.$emit('getCurrentPosition')
    },
    // 关闭
    close() {
      this.$emit('closeAreaSelect', false)
    },
    // 选择城市
    selCity(item) {
      this.$emit('selCity', item)
      this.close()
    }
  }
}
</script>
<style lang="scss" scoped>
.area {
  max-width: 750px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3000;
  background: #f5f5f5;
  overflow-y: scroll;
  .current {
    padding: 20px 30px;
    background: #fff;
    font-size: 30px;
  }
  .city-box {
    display: inline-block;
    font-size: 30px;
    width: calc(33.33% - 14px);
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: $colorF6;
    &:nth-child(3n){
      margin-right: 0;
    }
  }
  .local{
    display: inline-block;
    float: right;
    line-height: 80px;
  }
}

</style>
